<template>
  <div>
    <a-drawer
      class="agreeDrawer"
      title="查看协议内容"
      placement="right"
      :visible="drawer.visible"
      @close="close"
      width="50%"
      :body-style="{ paddingBottom: '80px !important' }"
    >
      <h3>《北京中业兴为科技集团有限公司课程购买协议》</h3>
      <div class="agreeInfo">
        <p class="indent">购买商品名称：</p>
        <p class="indent">购买商品类型：</p>
        <p class="indent">您所支付定金金额：</p>
        <p class="indent">您所支付全款金额：</p>
        <p class="indent">共计支付总金额：</p>
        <p class="indent">商品有效期：</p>
        <a-row class="info" :gutter="40">
          <a-col class="partyA" :span="10">
            <p class="indent top">甲方：</p>
            <p class="indent bottom">日期： 年 月 日</p>
          </a-col>
          <a-col class="partyB" :span="14">
            <p><span>乙方：</span><a-input placeholder="请输入"></a-input></p>
            <p><span>身份证号码：</span><a-input placeholder="请输入"></a-input></p>
            <p class="tip margin">此处填写的信息仅用于暴涨用户购买服务的合法权益</p>
            <p class="margin">日期： 年 月 日</p>
          </a-col>
        </a-row>
      </div>
      <div class="agreeContent">
        <div class="cententTit">协议条款内容：</div>
        <div class="modelContent">
          <div v-for="(item, index) in drawer.clause" :key="index">
            <p class="termTitle" v-if="item.content && item.content.length !== 0">
              {{ item.title }}
            </p>
            <p
              class="termTitle"
              v-if="
                index === 0 &&
                (item.sub[0].content.length !== 0 ||
                  item.sub[1].content.length !== 0 ||
                  item.sub[2].content.length !== 0)
              "
            >
              {{ item.title }}
            </p>
            <div v-if="item.sub">
              <div v-for="(el, i) in item.sub" :key="i">
                <p class="subtitle" v-if="el.content.length !== 0">{{ el.title }}</p>
                <p class="text" v-for="(child, k) in el.content" :key="k">
                  {{ child }}
                </p>
              </div>
            </div>
            <div v-if="index !== 0">
              <div v-for="(itemA, k) in item.content" :key="k">
                <p class="text" v-if="item.content.length !== 0">
                  {{ itemA }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <a-button type="primary" @click="close"> 确定 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
export default {
  props: {
    drawer: {
      type: Object,
      default: () => {
        return { visible: false, clause: [] }
      }
    }
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    close () {
      this.$emit('closeBox')
    }
  }
}
</script>
<style lang="less" scoped>
.agreeDrawer {
  p {
    line-height: 24px;
  }
  color: #000;
  .info {
    margin-top: 30px;
    margin-left: 0;
    .partyA {
      position: relative;
      height: 168px;
      .top {
        position: absolute;
        top: 0;
        left: 0;
      }
      .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .partyB {
      p {
        display: flex;
        span {
          width: 30%;
          text-align: right;
          line-height: 32px;
          margin-right: 1%;
        }
      }
      .tip {
        color: firebrick;
      }
      .margin {
        margin-left: 6%;
      }
    }
  }
  h3 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
  }
  .indent {
    text-indent: 2em;
  }
  .agreeContent {
    margin-top: 60px;
    .cententTit {
      margin-bottom: 30px;
    }
  }
  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e9e9e9;
    padding: 10px 16px;
    background: #fff;
    text-align: center;
    z-index: 1;
  }
}
</style>
